Summary

Phase 4 Batch A — three independent canvas pieces. Tasks 39 (Turn) and 41 (Transcript) follow once these land, then Task 42 (SessionCanvas) wires them together.

• Task 37 — <CanvasHead> (web/src/canvas/CanvasHead.tsx) — eyebrow (id · status · opened · pulse dot) + 30 px title (truncated to 80 chars) + meta row (env · sev · reporter · turns · tools · agents) with Stop / Retry (Retry only when status=error). 5 tests. Adds asr-pulse keyframes to global.css.
• Task 38 — <Sidenote> + <ToolCallCard> (web/src/canvas/{Sidenote,ToolCallCard}.tsx) — Turn's right column: k/v confidence/model/dur/turn + stacked tool-call cards with status pill, click → onSelectTool callback. 4 tests.
• Task 40 — <HITLBand> + questionFromToolCall (web/src/canvas/HITLBand.tsx, web/src/lib/hitl/questionFromToolCall.ts) — inline HITL approval band in same 3-col grid as Turn. APPROVAL byline + waited duration; question (client-generated from cfg.ui.hitl_question_templates); mono tool-line; Approve / Reject / Approve-with-Rationale buttons; sidenote with risk color. 9 tests (6 component + 3 lib).

Validation

• cd web && npm install → 0 vulnerabilities
• npm run typecheck → exit 0
• npx vitest run → 109 passed / 0 failed (Phase 3's 91 + 18 new)
• npm run build → clean, 247 kB JS (76 kB gzip), 10 kB CSS

Nothing touches src/runtime/ — no dist/app.py regen.

Design notes

• All 3 components are props-driven; App wiring (Phase 4 Task 42) will compose them inside SessionCanvas with hooks subscribed at the top.
• questionFromToolCall interpolates {agent} / {tool} / {risk} / flat {args.*} placeholders. Unresolved placeholders are left intact (visible in UI as {service}) so missing data surfaces rather than silently disappearing. Fallback template: Allow {agent} to call {tool} (risk: {risk})?.
• HITLBand uses the spec's warn-bg gradient (90 deg fading right) with 1 px warn top/bottom borders — visually distinct without being a card.

Test plan

• Vitest: 109/109 pass
• Typecheck: exit 0
• Build: clean
• Pytest backend stays green
• CI: lint + type + test + sonar + bundle + skill-lint
• CI: SonarCloud quality gate

🤖 Generated with Claude Code